<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-10-15 09:36:10
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-05 22:28:40
 * @FilePath: /nhw/src/views/Work/EmergencyManagement/index.vue
-->
<template>
  <Layout class="emergency-management-container" title="应急管理" border>
    <Tabs
      v-model="active"
      sticky
      :offset-top="$store.state.navHeight"
      @click="changeTab"
      swipeable
      ref="tabs"
    >
      <Tab title="应急物资" name="A">
        <PullRefresh v-model="isLoadingA" @refresh="onRefresh('A')">
          <MySearch @search="onSearch" mark="A" />
          <List
            v-model="loadingA"
            :finished="finishedA"
            finished-text="没有更多了"
            @load="onLoad('A')"
            v-if="goodsList.length > 0"
          >
            <Card v-for="(item, index) in goodsList" :key="index + 'a'">
              <div v-if="item.type == 1">
                <CardTitle
                  text="物资编号"
                  adorn
                  :stateText="item.distance + '米'"
                  :listId="item.eegId"
                />
                <CardTwig left="物资名称" :right="item.eegName" colon />
                <CardTwig left="物资类别" :right="item.egtName" colon />
                <CardTwig left="存储属性" :right="item.eegStoRage" colon />
                <CardTwig left="具体位置" :right="item.eegAddress" colon />
              </div>
              <div v-else @click="toGoodsDetails(item)">
                <CardTitle
                  :text="'储备库编号'"
                  adorn
                  :stateText="item.distance + '米'"
                  :listId="item.eegId"
                />
                <CardTwig left="物资名称" :right="item.eegName" colon />
                <CardTwig left="存储属性" :right="item.eegStoRage" colon />
                <CardTwig left="具体位置" :right="item.eegAddress" colon />
              </div>
            </Card>
          </List>
          <Empty description="无数据" v-else />
        </PullRefresh>
      </Tab>
      <Tab title="应急预案" name="B">
        <PullRefresh v-model="isLoadingB" @refresh="onRefresh('B')">
          <MySearch @search="onSearch" mark="B" />
          <List
            v-model="loadingB"
            :finished="finishedB"
            finished-text="没有更多了"
            @load="onLoad('B')"
            v-if="planList.length > 0"
          >
            <Card
              v-for="(item, index) in planList"
              :key="index + 'b'"
              @click="toPlanDetails(item)"
            >
              <CardTitle text="预案编号" :listId="item.edsId" adorn />
              <CardTwig left="预案名称" :right="item.edsName" colon />
              <CardTwig left="预案类型" :right="item.ownComType" colon />
              <CardTwig left="预案级别" :right="item.eetLevel" colon />
              <CardTwig left="组织部门" :right="item.departName" colon />
            </Card>
          </List>
          <Empty description="无数据" v-else />
        </PullRefresh>
      </Tab>
    </Tabs>
    <!-- main  end-->
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import Card from "components/Card";
import CardTwig from "components/Card/CardTwig";
import CardTitle from "components/Card/CardTitle";
import MySearch from "components/MySearch";
import { Tab, Tabs, Icon, List, PullRefresh, Empty } from "vant";
import getPosition from "@/utils/getPosition.js";
import { getDrillOtherList } from "@/api/work.js";
export default {
  name: "EmergencyManagement",
  components: {
    Layout,
    // PopupCon,
    Card,
    CardTwig,
    CardTitle,
    MySearch,
    Tab,
    Tabs,
    Icon,
    List,
    PullRefresh,
    Empty,
  },
  data() {
    return {
      orgNo: "",
      active: "A",
      lng: 120.068788,
      lat: 31.417695,
      //A应急物资
      loadingA: false,
      finishedA: false,
      isLoadingA: false,
      searchKeyA: "",
      pageNumA: 1,
      goodsList: [],
      //B应急预案
      loadingB: false,
      finishedB: false,
      isLoadingB: false,
      searchKeyB: "",
      pageNumB: 1,
      planList: [],
    };
  },
  created() {
    this.orgNo = window.localStorage.getItem("orgNo");
    this.getPoint()
      .then((res) => {
        this.getDrillOtherList().then((res) => {
          console.log(res);
          this.goodsList = res;
        });
      })
      .catch((err) => {
        this.$toast.fail("请打开手机定位!");
      });
  },

  mounted() {},

  methods: {
    //切换tab
    changeTab(value) {
      this["pageNum" + value] = 1;
      this["finished" + value] = false;
      this.getDrillOtherList().then((res) => {
        if (value === "A") {
          this.goodsList = res;
        } else if (value === "B") {
          this.planList = res;
        }
      });
    },
    //搜索
    onSearch({ mark, key }) {
      this["finished" + mark] = false;
      this["searchKey" + mark] = key;
      this["pageNum" + mark] = 1;
      if (mark == "A") {
        this.getDrillOtherList().then((res) => {
          this.goodsList = res;
        });
      } else if (mark == "B") {
        this.getDrillOtherList().then((res) => {
          this.planList = res;
        });
      }
    },
    //下拉加载更多
    onLoad(mark) {
      if (mark == "A") {
        this.pageNumA++;
        this.finishedA = false;
        this.getDrillOtherList().then((res) => {
          this.goodsList.push(...res);
          this.loadingA = false;
        });
      } else if (mark == "B") {
        this.pageNumB++;
        this.finishedB = false;
        this.getDrillOtherList().then((res) => {
          this.planList.push(...res);
          this.loadingB = false;
        });
      }
    },
    //刷新
    onRefresh() {
      const cur = this.active;
      this["finished" + cur] = false;
      this["pageNum" + cur] = 1;
      this.getDrillOtherList().then((res) => {
        if (cur == "A") {
          this.goodsList = res;
          this.isLoadingA = false;
        } else if (cur == "B") {
          this.planList = res;
          this.isLoadingB = false;
        }
      });
    },
    //预案详情
    toPlanDetails(item) {
      this.$router.push({
        name: "EmergencyPlanDetails",
        params: { data: item },
      });
    },
    //仓库详情
    toGoodsDetails(item) {
      this.$router.push({
        name: "EmergencyGoodsDetails",
        params: { data: item },
      });
    },
    //获取坐标
    getPoint() {
      return new Promise((resolve, reject) => {
        getPosition()
          .then((res) => {
            this.lng = res.lng;
            this.lat = res.lat;
            resolve();
          })
          .catch((err) => {
            reject(err);
          });

        // this.$geolocation.getCurrentPosition(
        //   (position) => {
        //     const { lat, lng } = position.point;
        //     this.lng = lng;
        //     this.lat = lat;
        //     resolve();
        //   },
        //   (e) => {
        //     console.log(e);
        //     reject();
        //     this.$toast("定位失败！");
        //   },
        //   { provider: "baidu" }
        // );
      });
    },
    //请求数据
    async getDrillOtherList() {
      const cur = this.active;
      const flag = {
        A: {
          //物资
          pageNum: this.pageNumA,
          type: "wu-zi",
          name: this.searchKeyA,
        },
        B: {
          //预案
          pageNum: this.pageNumB,
          type: "yu-an",
          name: this.searchKeyB,
        },
      };
      if (!this.lng || !this.lng) {
        return [];
      }
      const data = {
        pageNum: flag[cur].pageNum,
        pageSize: 10,
        orgNo: this.orgNo,
        name: flag[cur].name, //搜索词
        type: flag[cur].type, //wu-zi 物资 yu-an预案
        point: this.lng + "," + this.lat,
      };
      const res = await getDrillOtherList(data);
      //完成加载全部
      if (this.active == "A" && res.param.sumPage <= this.pageNumA) {
        this.finishedA = true;
      } else if (this.active == "B" && res.param.sumPage <= this.pageNumB) {
        this.finishedB = true;
      }
      //返回顶部滚动条
      this.$refs.tabs.$el.scrollTop = -1;

      this.$nextTick(() => {
        this.$refs.tabs.$el.scrollTop = 0;
      });
      //返回数据
      return res.param.data;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tabs__line {
  background-color: transparent;
  background-image: linear-gradient(90deg, #e0680f, #e68840);
}
</style>